<template>
  <div class="pay-cancel-page">
    <!-- 顶部导航：支持返回支付页 -->
    <van-nav-bar
        title="取消支付"
        left-arrow
        @click-left="handleGoBack"
        class="cancel-nav"
    />

    <!-- 主体内容：简洁引导 + 订单信息 -->
    <div class="cancel-container">
      <!-- 取消提示图标 -->
      <div class="cancel-icon">
        <van-icon name="close-circle" color="#ff4d4f" size="60" />
      </div>

      <!-- 标题说明 -->
      <div class="cancel-title">确定要取消当前订单的支付吗？</div>
      <div class="cancel-desc">取消后可在“我的订单”中重新发起支付</div>

      <!-- 订单信息摘要：让用户确认取消的订单 -->
      <div class="order-card">
        <div class="order-item">
          <span class="order-label">订单编号：</span>
          <span class="order-value">{{ orderNumber }}</span>
        </div>
        <div class="order-item">
          <span class="order-label">商品名称：</span>
          <span class="order-value">{{ itemTitle }}</span>
        </div>
        <div class="order-item">
          <span class="order-label">待付金额：</span>
          <span class="order-value price">¥{{ itemPrice }}</span>
        </div>
      </div>

      <!-- 底部操作按钮 -->
      <div class="cancel-btns">
        <van-button
            class="btn-back"
            type="default"
            @click="handleGoBack"
        >
          返回支付页
        </van-button>
        <van-button
            class="btn-confirm"
            type="danger"
            @click="handleConfirmCancel"
        >
          确认取消
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { showToast } from 'vant';

// 路由实例
const route = useRoute();
const router = useRouter();

// 接收从支付页携带的订单信息（用于页面展示）
const orderNumber = ref(route.query.orderNumber as string || '未知订单');
const itemTitle = ref(route.query.itemTitle as string || '未知商品');
const itemPrice = ref(route.query.itemPrice as string || '0');

// 返回上一页（支付页）
const handleGoBack = () => {
  router.back();
};

// 确认取消：直接跳转到“支付已取消页面”
const handleConfirmCancel = () => {
  // 携带订单信息跳转，供“支付已取消页面”展示
  router.push({
    path: '/PayCanceled', // 支付已取消页面的路由路径
    query: {
      orderNumber: orderNumber.value,
      itemTitle: itemTitle.value,
      itemPrice: itemPrice.value
    }
  });
  showToast('正在取消支付...');
};
</script>

<style scoped>
/* 页面整体样式 */
.pay-cancel-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 80px;
}

/* 顶部导航 */
.cancel-nav {
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 主体容器 */
.cancel-container {
  width: 92%;
  margin: 0 auto;
  padding-top: 40px;
  text-align: center;
}

/* 取消图标 */
.cancel-icon {
  margin-bottom: 20px;
}

/* 标题与说明 */
.cancel-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}
.cancel-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 30px;
}

/* 订单信息卡片 */
.order-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 30px;
  text-align: left;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.order-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 12px;
}
.order-item:last-child {
  margin-bottom: 0;
}
.order-label {
  color: #666;
}
.order-value {
  color: #333;
}
/* 金额样式 */
.order-value.price {
  color: #ff4d4f;
  font-weight: 500;
}

/* 底部按钮组 */
.cancel-btns {
  display: flex;
  gap: 12px;
  position: fixed;
  bottom: 24px;
  left: 4%;
  right: 4%;
}
.btn-back, .btn-confirm {
  flex: 1;
  height: 44px;
  border-radius: 22px;
  font-size: 16px;
}
/* 返回按钮 */
.btn-back {
  border: 1px solid #ddd;
  color: #333;
}
/* 确认取消按钮 */
.btn-confirm {
  background-color: #ff4d4f;
  color: #fff;
}
</style>